<style scoped>
    .content-box {
        width: 100%;
        height: 100%;
        background: #ffffff;
        position: relative;
    }

    .top {
        height: 65px;
        background: #eaedf1;
        border-top: 1px solid #bbbbbb;
        border-bottom: 1px solid #bbbbbb;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 18px;
        color: #3bc1a6;
        line-height: 65px;
        padding-left: 50px;
    }

    .content {
        position: absolute;
        left: 0;
        top: 65px;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

    .dg_button {
        color: #3bc1a6;
        cursor: pointer;
    }

    .dg_button:hover {
        color: #3bc1af;
    }
</style>
<template>
    <div class="content-box">
        <div class="top">
            <el-button type="primary" size="small" @click="showDialog('add')">添加</el-button>
        </div>
        <div class="content">
            <DataGrid ref="dg" url="/admin/list" :params="po.params">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="email" label="登录邮箱" width="280" header-align="center" align="left"></el-table-column>
                <el-table-column prop="name" label="姓名" width="130" align="center"></el-table-column>
                <el-table-column prop="job" label="职责" width="180" align="center"></el-table-column>
                <el-table-column label="添加时间" width="160" align="center">
                    <template slot-scope="scope">
                        <div>{{getDateTimeString(scope.row.createTime)}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="最后登录" width="160" align="center">
                    <template slot-scope="scope">
                        <div>{{getDateTimeString(scope.row.lastLoginTime)}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="是否启用" width="120" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status===-1">已删除</span>
                        <div v-else>
                            <el-switch v-if="scope.row.superAdmin==0" :active-value="1" :inactive-value="0"
                                       v-model="scope.row.status"
                                       active-color="#13ce66" inactive-color="#ff4949"
                                       @change="changeStatus(scope.row)"></el-switch>
                            <span v-else>不可操作</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.superAdmin==0&&scope.row.status!==-1">
                            <span class="dg_button" @click="showDialog('edit',scope.row)">编辑</span>
                            <span class="dg_button" @click="resetPwd(scope.row)">重置密码</span>
                            <span class="dg_button" @click="del(scope.row)">删除</span>
                        </div>
                        <span v-else>不可操作</span>
                    </template>
                </el-table-column>
            </DataGrid>
        </div>


        <el-dialog :title="vo.dialogTitle" :visible.sync="vo.showDialog">
            <el-form :model="po.admin" ref="form" label-width='100px'>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="po.admin.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="po.admin.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="职责" prop="job">
                    <el-input v-model="po.admin.job" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="power" header-align="center" align="left">
                    <el-checkbox-group v-model="po.admin.power">
                        <el-checkbox v-for="role in vo.roleList" :label="role._id" :key="role._id">{{role.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="po.admin.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="vo.showDialog = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getDateTimeString, getDateString} from 'utils'
    import bus  from 'utils/bus'
    export default {
        data(){
            return {
                po: {
                    params: {},
                    admin: {
                        id: null,
                        email: '',
                        name: '',
                        job: '',
                        power: [],
                        status: 1,
                    },
                },
                vo: {
                    showDialog: false,
                    dialogTitle: '',
                    roleList: [],
                    currAdmin: {}
                }
            }
        },
        computed: {},
        methods: {
            getDateString,
            getDateTimeString,
            getDateTimeShort(time){
                return getDateTimeString(time).substring(0, 16)
            },
            reload(){
                this.$refs.dg.reload()
            },

            changeStatus(info){
                this.$confirm(`您确定要${info.status == 1 ? "启用" : "禁用"}用户${info.name}的吗?`, '操作确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/admin/changeStatus", {id: info._id}).then(data=> {
                        this.reload()
                    }).catch(err=> {
                        info.status = Math.abs(info.status - 1)
                        this.$alert(err.message, {type: 'error'})
                    })
                }).catch(() => {
                    info.status = Math.abs(info.status - 1)
                });
            },

            resetPwd(info){
                this.$confirm(`您确定要重置用户${info.name}的密码吗?`, '操作确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/admin/resetPwd", {id: info._id}).then(data=> {
                        this.$message('操作成功')
                    }).catch(err=> {
                        this.$alert(err.message, {type: 'error'})
                    })
                }).catch(() => {  });
            },

            showDialog(mode, info){
                this.vo.showDialog = true
                if (mode == 'add') {
                    this.po.admin = {
                        id: null,
                        email: '',
                        name: '',
                        job: '',
                        power: [],
                        status: 1
                    }
                    this.vo.dialogTitle = '添加管理员'
                } else {
                    this.vo.dialogTitle = '编辑管理员'
                    Object.keys(this.po.admin).forEach(field=> {
                        this.po.admin[field] = info[field]
                    })
                    this.po.admin.power = info.power.map(item=>item._id)
                    this.po.admin.id = info._id
                }
            },
            edit(){
                this.$refs.form.validate().then(valid=> {
                    if (valid) {
                        this.$post("/admin/edit", this.po.admin).then(data=> {
                            this.vo.showDialog = false
                            this.reload()
                        }).catch(err=> {
                            this.$alert(err.message, {type: 'error'})
                        })
                    }
                }).catch(()=> {
                })
            },
            del(info){
                this.$confirm(`您确定要删除管理员【${info.name}】的吗?`, '操作确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/admin/del", {id: info._id}).then(data=> {
                        this.reload()
                    }).catch(err=> {
                        this.$alert(err.message, {type: 'error'})
                    })
                }).catch(() => {

                });
            },

            getRoleList(){
                this.$get('/admin/roleList').then(data=> {
                    this.vo.roleList = data
                }).catch(err=> {
                    this.$alert(err.message, {type: 'error'})
                })
            }
        },
        mounted(){
            this.getRoleList()
            try {
                let admin = window.sessionStorage.getItem("admin")
                this.vo.currAdmin = JSON.parse(admin)
            } catch (e) {
            }
            bus.$on("reload", ()=> {
                this.getRoleList()
                this.reload()
            })
        },
        destroyed(){
            bus.$off("reload")
        },
        components: {},
        filters: {}
    }
</script>